<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/11/24
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<!DOCTYPE html>

<html>
<head>
    <title>角色管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/icon.css">
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#search").click(function(){
                $('#tt').datagrid('load',{
                    title: $('#title').val()
                });
            });
        });
    </script>
</head>
<body>
<div  style="padding-right:5px;width:780px;height: 700px" border="false">
<!--列表-->
<table id="tt" class="easyui-datagrid" title="角色管理"
       data-options="singleSelect:true,collapsible:true,url:'${path}/rbacRole/view.do',
       method:'get',toolbar:'#tb',footer:'#ft',pagination:'true',fit:'true'">
    <thead>
    <tr>
        <th data-options="field:'id',align:'center',width:80">序号</th>
        <th data-options="field:'roleName',align:'center',width:100">角色名称</th>
        <th data-options="field:'description',align:'center',width:100">描述</th>
        <th data-options="field:'isValid',align:'center',width:100,formatter:function(v){if(v == 101001){ return '激活';}else{ return '停用';} }">描述</th>
        <th data-options="field:'action',align:'center',width:100,formatter:rowformatter">操作</th>
    </tr>
    </thead>
</table>
 </div>
<div style="position: absolute;right: 210px;top: 8px;">
    <div id="p1" class="easyui-panel" title="资源树" style="padding:5px;width:200px;height: 700px"
         data-options="tools:'#save1'">
        <!--资源列表-->
        <ul id="tree1" class="easyui-tree" data-options="url:'${path}/rbacRole/getResourcesTree.do',checkbox:true"></ul>
    </div>
</div>
<div id="save1">
    <a href="#" class="icon-save" onclick="javascript:treeSave()"></a>
</div>
<div style="position: absolute;right: 5px;top: 8px;">
    <div id="p2"  class="easyui-panel" title="操作树" style="padding:5px;width:200px;height: 700px"
          data-options="tools:'#save2'">
        <!--操作码列表-->
        <ul id="tree2" class="easyui-tree" data-options="url:'${path}/rbacRole/getOperatingTree.do',checkbox:true"></ul>
    </div>
</div>
<div id="save2">
    <a href="#" class="icon-save" onclick="javascript:treeSave2()"></a>
</div>
<!--头工具项-->
<div id="tb" style="padding:2px 5px;">
    名称: <input class="easyui-textbox" name="title" id="title" style="width:110px">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="search">查找</a>
</div>
<!--尾工具项-->
<div id="ft" style="padding:2px 5px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="#" class="easyui-linkbutton" siconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>
<!--添加编辑页面-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">角色管理</div>
    <form id="fm" class="easyui-form" method="post">
        <div class="fitem">
            <label>角色名称:</label>
            <input name="roleName" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>描述:</label>
            <input name="description" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>状态:</label>
            <select class="easyui-combobox" panelHeight="auto" name="isValid" id="isValid" style="width:100px">
                <option value="101001">激活</option>
                <option value="101002">停用</option>
            </select>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<input type="hidden" id="roleId">
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','添加角色');
        $('#fm').form('clear');
        url = '${path}/rbacRole/add.do';
    }
    function editUser(){
        var row = $('#tt').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','修改角色');
            $('#fm').form('load',row);
            url = '${path}/rbacRole/edit.do?id='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
//                var result = eval('('+result+')');
                if (result.errormsg != undefined){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errormsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#tt').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#tt').datagrid('getSelected');
        if (row){
            $.messager.confirm('提示','你是否确定要删除此角色?',function(r){
                if (r){
                    $.post('${path}/rbacRole/delete.do',{id:row.id},function(result){
                        if (result.errormsg == undefined){
                            $('#tt').datagrid('reload');
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errormsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
    function rowformatter(value,row,index){
        var str = '<a href="#" onclick="setRro('+row.id+',\''+row.roleName+'\','+index+')">设置权限</a>';
        if(row.isValid == 101001){
            return '<a href="#" onclick="stop('+row.id+',\''+row.roleName+'\','+index+')">停用</a>'+"&nbsp;&nbsp;"+str;
        }else{
            return '<a href="#" onclick="activate('+row.id+',\''+row.roleName+'\','+index+')">激活</a>'+"&nbsp;&nbsp;"+str;
        }
    }
    function activate(id,title,lastIndex){
        if(confirm("您是否要激活角色《"+title+"》")) {
            $.post("${path}/rbacRole/activate.do",{
                id:id
            },function(data){
                if(data.errormsg == undefined){
                    $('#tt').datagrid('updateRow', {
                        index:lastIndex,
                        row:{
                            isValid:101001
                        }
                    });
                }else{
                    alert(data.errormsg);
                }
            },"json");
        }

    }
    function stop(id,title,lastIndex){
        if(confirm("您是否要停用角色《"+title+"》")) {
            $.post("${path}/rbacRole/stop.do",{
                id:id
            },function(data){
                if(data.errormsg == undefined){
                    $('#tt').datagrid('updateRow', {
                        index:lastIndex,
                        row:{
                            isValid:101002
                        }
                    });
                }else{
                    alert(data.errormsg);
                }
            },"json");
        }

    }
    function setRro(id,title,lastIndex){
         $("#roleId").val(id);
        //初始化树
        var rows=$('#tt').datagrid('getRows');//获取所有当前加载的数据行
        var row=rows[lastIndex];///
        var resourcesIds = row.resourcesIds;
        //清空选中节点
        var nodes = $('#tree1').tree('getChecked');
        if(nodes != null){
            for(var i=0;i<nodes.length;i++){
                $('#tree1').tree('uncheck', nodes[i].target);
                $('#tree1').tree('update', {
                    target: nodes[i].target,
                    attributes: {
                        opIds : ""
                    }
                });
            }
        }
        //清空
        clearTree2();
        //初始化选中树
        if(resourcesIds != undefined ){
            var resourcesIds = resourcesIds.split(",");
            for(var i=0;i<resourcesIds.length;i++){
                var node = $('#tree1').tree('find', resourcesIds[i]);
                if(node){
                    $('#tree1').tree('check', node.target);
                }

            }
        }
        $('#p1').panel('setTitle',"资源树("+title+")");
        //初始化资源操作嘛
        $.post("${path}/rbacRole/getOpIdsByRoleId.do",{
            roleId:id
        },function(data){
            //console.log(data);
            if(data != undefined){
                for(var i=0;i<data.length;i++){
                    var obj = data[i];
                    var node = $('#tree1').tree('find', obj.id);
                    if(node){
                        $('#tree1').tree('update', {
                            target: node.target,
                            attributes: {
                                opIds : obj.opIds
                            }
                        });
                    }

                }
            }
        },"json");
        //$('#p2').panel('setTitle',"操作树("+title+")");
    }
    //资源保存
    function treeSave(){
        var nodes1=$('#tree1').tree('getChecked');
        var resourcesIds = "";
        if(nodes1.length == 0){
            $.messager.alert("提示","请选择资源","info");
            return;
        }
        var arr = new Array();
        for(var i=0;i<nodes1.length;i++){
            var obj = {
                id : nodes1[i].id,
                opIds : nodes1[i].attributes.opIds
            }
            arr.push(obj);
        }
        var roleId = $('#roleId').val();
        if (roleId) {
            $.post("${path}/rbacRole/saveRro.do", {
                resources: JSON.stringify(arr),
                roleId: roleId
            }, function (result) {
                if (result.errormsg == undefined){
                    $.messager.alert("提示","更改权限成功","info");
                    $('#tt').datagrid('reload');
                } else {
                    $.messager.alert("提示",result.errormsg,"error");
                }
            }, "json");
        }else{
            $.messager.alert("提示","请点击管理员右边的设置权限","info");
        }
    }
    //操作吗保存
    function treeSave2(){
        var node = $('#tree1').tree('getSelected');

        if(node){
            var opIds="";
            var nodes2=$('#tree2').tree('getChecked');
            if(nodes2 != null){
                for(var i=0;i<nodes2.length;i++){
                    if(i!=0){
                        opIds+=",";
                    }
                    opIds+=nodes2[i].id;
                }
            }else{
                $.messager.alert("提示","请选择操作码","info");
                return;
            }
            $('#tree1').tree('update', {
                target: node.target,
                attributes: {
                    opIds : opIds
                }
            });
        }
    }
    //设置操作初始化
    function setOper(opIds){
        var node = $('#tree1').tree('getSelected');
        $('#p2').panel('setTitle',"操作树("+node.text+")");
        //清空
        clearTree2();
        //赋值
        if(opIds != undefined && opIds!= ''){
            var arr = opIds.split(",");
            for(var i=0;i<arr.length;i++){
                var node = $('#tree2').tree('find', arr[i]);
                if(node){
                    $('#tree2').tree('check', node.target);
                }

            }
        }
    }
    //清空选中树2
    function clearTree2(){
        var nodes = $('#tree2').tree('getChecked');
        if(nodes != null){
            for(var i=0;i<nodes.length;i++){
                $('#tree2').tree('uncheck', nodes[i].target);
            }
        }
    }
    $(function(){
        $('#tree1').tree({
            onClick: function(node){
                setOper(node.attributes.opIds);
            }
        });
    });
</script>
<style type="text/css">
    #fm{
        margin:0;
        padding:10px 30px;
    }
    .ftitle{
        font-size:14px;
        font-weight:bold;
        padding:5px 0;
        margin-bottom:10px;
        border-bottom:1px solid #ccc;
    }
    .fitem{
        margin-bottom:5px;
    }
    .fitem label{
        display:inline-block;
        width:80px;
    }
    .fitem input{
        width:160px;
    }
</style>
<!--添加编辑页面-->
</body>
</html>
